<template>
    <div>
      <Header></Header>
      <div style="margin-top:-20px;">
         <group>
            <x-input title="书名" v-model="addForm.name" placeholder="给作品起一个响亮的名字吧"></x-input>
            <selector title="频道" placeholder="请选择频道" v-model="addForm.cancelId" :options="cannelList" @on-change="getClassifyList"></selector>
            <selector title="分类" placeholder="请选择分类" v-model="addForm.classify" :options="classifyList"></selector>
            <x-textarea title="简介" v-model="addForm.describ" :max="400" :rows="5" placeholder="霸气的简介还没想好？没关系，暂可不填，下次再写。"></x-textarea>
            <div style="padding:20px"><x-button type="warn" @click.native="goBookChapte">下一步</x-button></div>
         </group>
      </div>
      <div>
        <section class="writingFoot">
            <div>
                <p>
                    <span class="text">作品审核<br><em>正文字数大于500字</em></span>
                    <span><img src="http://img1.17k.com/touch/skin/author/arr_right_red.jpg"></span>
                    <span class="text">签约<br><em>持续更新</em></span>
                    <span><img src="http://img1.17k.com/touch/skin/author/arr_right_red.jpg"></span>
                    <span class="text">上架</span>
                    <span><img src="http://img1.17k.com/touch/skin/author/arr_right_red.jpg"></span>
                    <span class="text">收钱啦</span>
                </p>
            </div>
        </section>
      </div>
      <divider>37K小说网 创作改变人生</divider>
    </div>
</template>

<script>
import Header from '@/components/commons/header/header'
import bookController from '@/api/bookController/index'
import USER from '@/utils/user'
import {mapActions,mapState} from 'vuex'
    export default {
      name:'createBookPage',
      data(){
        return {
          userInfo: null,
          classifyList:[],//分类
          addForm:{
            name:null, //书籍名
            cancelId:null,
            classify:null,
            describ:null,//描述
          }
        }
      },
       created(){
        this.getLoginInfo();
        this.getCannel();//获取频道
      },
      computed: {
        ...mapState({
          cannelList: state => state.cannel.cannelList,
        })
      },
      components:{Header},
      methods:{
      ...mapActions([
        'setCannelList'
      ]),
      getCannel(){//获取频道
        if(this.cannelList.length==0){
          bookController.getAllBookChannel().then(response=>{
            var list = [];
            for(var i in response.data.list){
              var res = {
                key:null,
                value:null
              }
              res.key = response.data.list[i].value;
              res.value = response.data.list[i].label;
              list.push(res);
            }
            this.setCannelList(list)
          })
        }
      },
      getClassifyList(channelId){
        if(channelId){
          bookController.getClassifyByChannel({channelId:channelId}).then(response=>{
            var list = [];
            for(var i in response.data.list){
              var res = {
                key:null,
                value:null
              }
              res.key = response.data.list[i].value;
              res.value = response.data.list[i].label;
              list.push(res);
            }
            this.classifyList = list;
          })
        }
      },
      getLoginInfo(){ //获取登录信息,如果登录，重定向至登录页面
        var loginInfo = USER.getUserInfo();
        this.userInfo = loginInfo;
        if(loginInfo.isLogin==1){ //0已登录 1未登录
          this.$router.push({name:'login'})
        }else if(!loginInfo.userCustominfo5){//不存在笔名，非作者，跳转至创建笔名页面
          this.$router.push({name:'penName'})
        }
      },
      goBookChapte(){ //跳转至创建章节页面
        //表单验证
        if(!this.addForm.name){//未填写书籍名称
          this.$vux.toast.show({
              text: '请填写书籍名称',
              type:'warn'
          })
          return false
        }
        if(!this.addForm.cancelId){
            this.$vux.toast.show({
              text: '请选择书籍频道',
              type:'warn'
          })
          return false
        }
        if(!this.addForm.classify){
            this.$vux.toast.show({
              text: '请选择书籍分类',
              type:'warn'
          })
          return false
        }        
        bookController.checkBookName({name:this.addForm.name}).then(response=>{
          if(response.data.success){//书籍名可用
             var formData = this.addForm
             bookController.insertRecord(formData).then(response=>{
               this.$vux.toast.show({
                  text: response.msg,
                  type:'success'
                })
                //页面跳转
                 this.$router.push({name:'createBookChapterPage',params: response.data})
             })
          }else{
             this.$vux.toast.show({
              text: response.data.msg,
              type:'warn'
            })
          }
        }) 
      }
    }
  }
</script>

<style scoped>
section.writingFoot {
    background: #F2F2F2;
}
section.writingFoot div {
    padding: 0 15px 25px 15px;
}
section.writingFoot div p {
    padding: 15px 0;
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
}
section.writingFoot div p span.text {
    border: 1px solid #D4D4D4;
    background: #fff;
    padding: 0.5em 0;
    color: #424242;
    font-size: 14px;
}

section.writingFoot div p span {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    display: block;
    text-align: center;
}
section.writingFoot div p span.text em {
    font-style: normal;
    color: #C3C3C3;
    font-size: 12px;
}
section.writingFoot div p span img {
    width: 6px;
    height: 11px;
    vertical-align: middle;
}

section.writingFoot div p span {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    display: block;
    text-align: center;
}
section.writingFoot div p span:nth-of-type(even) {
    padding-top: 15px;
}

section.writingFoot div p span {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    display: block;
    text-align: center;
}
</style>
